<style lang="less">
    @import "./home.less";
    @import "../../../../styles/common.less";
</style>
<template>
    <div class="home-main">

      <Row :gutter="10" :style="{marginTop: '20px'}">
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px', textAlign:'center'}">
            <i-circle :percent="100">
              <span class="demo-Circle-inner" style="font-size:24px">230</span>
              <p class="demo-Circle-inner" style="font-size:12px">总任务</p>
            </i-circle>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px', textAlign:'center'}">
            <i-circle :percent="200/230*100" stroke-color="#5cb85c">
              <span class="demo-Circle-inner" style="font-size:24px">200</span>
              <p class="demo-Circle-inner" style="font-size:12px">已完成</p>
            </i-circle>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px', textAlign:'center'}">
            <i-circle :percent="4/230*100" stroke-color="#ff5500">
              <span class="demo-Circle-inner" style="font-size:24px">4</span>
              <p class="demo-Circle-inner" style="font-size:12px">已逾期</p>
            </i-circle>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px', textAlign:'center'}">
            <i-circle :percent="10/230*100" stroke-color="rgb(255, 213, 114)">
              <span class="demo-Circle-inner" style="font-size:24px">10</span>
              <p class="demo-Circle-inner" style="font-size:12px">未认领</p>
            </i-circle>
          </Col>
      </Row>

        <Row :gutter="10" class="margin-top-10">
            <Col :md="24" :lg="8" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-map"></Icon>
                        上周每日任务进展数量
                    </p>
                    <div class="data-source-row">
                        <visite-volume></visite-volume>
                    </div>
                </Card>
            </Col>
            <Col :md="24" :lg="8" :style="{marginBottom: '10px'}">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="ios-pulse-strong"></Icon>
                        子任务比重
                    </p>
                    <div class="data-source-row">
                        <data-source-pie></data-source-pie>
                    </div>
                </Card>
            </Col>
            <Col :md="24" :lg="8">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-wifi"></Icon>
                        当前进展速度
                    </p>
                    <div class="data-source-row">
                        <user-flow></user-flow>
                    </div>
                </Card>
            </Col>
        </Row>
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="ios-shuffle-strong"></Icon>
                    任务办理进度统计(件)
                </p>
                <div class="line-chart-con">
                    <service-requests></service-requests>
                </div>
            </Card>
        </Row>
      <Row class="margin-top-10">
      <Card>
        <p slot="title" class="card-title">
          <Icon type="ios-shuffle-strong"></Icon>
          任务分解情况
        </p>
        <div class="tree-chart-con">
          <Tree></Tree>
        </div>
      </Card>
    </Row>
    </div>
</template>

<script>
import cityData from './map-data/get-city-value.js';
import homeMap from './components/map.vue';
import dataSourcePie from './components/dataSourcePie.vue';
import visiteVolume from './components/visiteVolume.vue';
import serviceRequests from './components/serviceRequests.vue';
import userFlow from './components/userFlow.vue';
import countUp from './components/countUp.vue';
import inforCard from './components/inforCard.vue';
import mapDataTable from './components/mapDataTable.vue';
import toDoListItem from './components/toDoListItem.vue';
import Tree from './components/tree-radial.vue'

export default {
    name: 'home',
    components: {
        homeMap,
        dataSourcePie,
        visiteVolume,
        serviceRequests,
        userFlow,
        countUp,
        inforCard,
        mapDataTable,
        toDoListItem,
        Tree
    },
    data () {
        return {
            toDoList: [
                {
                    title: '去iView官网学习完整的iView组件'
                },
                {
                    title: '去iView官网学习完整的iView组件'
                },
                {
                    title: '去iView官网学习完整的iView组件'
                },
                {
                    title: '去iView官网学习完整的iView组件'
                },
                {
                    title: '去iView官网学习完整的iView组件'
                }
            ],
            count: {
                createUser: 496,
                visit: 3264,
                collection: 24389305,
                transfer: 39503498
            },
            cityData: cityData,
            showAddNewTodo: false,
            newToDoItemValue: ''
        };
    },
    computed: {
        avatorPath () {
            return localStorage.avatorImgPath;
        }
    },
    methods: {
        addNewToDoItem () {
            this.showAddNewTodo = true;
        },
        addNew () {
            if (this.newToDoItemValue.length !== 0) {
                this.toDoList.unshift({
                    title: this.newToDoItemValue
                });
                setTimeout(() => {
                    this.newToDoItemValue = '';
                }, 200);
                this.showAddNewTodo = false;
            } else {
                this.$Message.error('请输入待办事项内容');
            }
        },
        cancelAdd () {
            this.showAddNewTodo = false;
            this.newToDoItemValue = '';
        }
    }
};
</script>
